<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>03.常用图表_柱状图</title>
</head>
<body>
<!--
  步骤：
    1.下载echarts，并引入
    2.为 ECharts 准备一个具备高宽的 DOM 容器
    3.以通过 echarts.init 方法初始化一个 echarts 实例
    4.通过 setOption 方法生成一个简单的柱状图(type：bar)
-->

<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>

<!-- 引入 ECharts 文件 -->
<script src="js/echarts.js"></script>
<script type="text/javascript">
  console.log(typeof echarts)
  // 基于准备好的dom，初始化 echarts 实例 echarts.init()
  var myChart = echarts.init(document.getElementById('main'))

  // 指定图表的配置项和数据
  var option = {
    title: { //标题
      text: '前端课程时间(天)'
    },
    legend: { //图例
      data: ['前端课程']
    },
    xAxis: { //X轴
      data: ["HTML", "css", "Node", "JS基础",'JS框架', "移动端"]
    },
    yAxis: { //Y轴

    },
    series: [{ //数据
      name: '前端课程',
      //直方图类型  bar
      type: 'bar',
      data: [5, 10, 10, 10, 35, 15]
    }],
    tooltip: { //弹窗组件

    },
  }

  // 使用刚指定的配置项和数据显示图表
  myChart.setOption(option)
</script>
</body>

</html>
